<template>
  <a-card :loading="loading" title="收藏的商品">
    <a-empty v-if="collectList.length === 0">
      <span slot="description"> 您目前还没有收藏商品哦~~ </span>
      <a-button type="danger">
        再逛逛
      </a-button>
    </a-empty>
    <a-list v-else :grid="{ gutter: 16, column: 4 }" :data-source="collectList">
      <a-list-item slot="renderItem" slot-scope="item">
        <a-popover trigger="hover" placement="rightTop">
          <template slot="content">
            <a-button type="link" @click="addCollect(item.gid)">取消收藏</a-button>
          </template>
          <a-card
            hoverable
            :bordered="false"
            style="background:#fafafa; text-align: center;"
            @click="$router.push({ name: 'ProductDetail', params: { id: item.gid } })"
          >
            <div>
              <img width="85" height="85" :src="item.image" />
            </div>
            <h4>{{item.name}}</h4>
            <p>
              <ellipsis :length="24" tooltip>{{item.describe}}</ellipsis>
            </p>
            <span v-if="item.price != 0" class="txt">￥{{item.price}}</span>
            <span v-else class="txt">立即咨询</span>
          </a-card>
        </a-popover>
      </a-list-item>
    </a-list>
  </a-card>
</template>

<script>
import { Ellipsis } from '@/components'
import { getCollectList, addCollect } from '@/api/collect'

export default {
  components: {
    Ellipsis
  },
  name: 'CollectList',
  data () {
    return {
      loading: false,
      collectList: []
    }
  },
  created () {
    this.getMyCollect()
  },
  methods: {
    getMyCollect () {
      this.loading = true
      getCollectList().then(res => {
        this.collectList = res.result.data
        this.loading = false
      })
    },
    addCollect (id) {
      const app = this
      addCollect(id).then(res => {
        app.$message.success('操作成功')
        app.getMyCollect()
      })
    }
  }
}
</script>

<style scoped>
  .txt {
    font-size: 16px;
    color: #ff3c28;
  }
</style>
